<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head th:include="common/head :: head"></head>
<link rel="stylesheet" href="./css/stype/index.css">

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!--头部导航-->
    <div th:include="common/header :: head_home"></div>

    <!--侧边栏-->
    <div th:include="common/sidebar :: sidebar_home"></div>
  

  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div  class="top-hadoop">
        <div class="top-hadoop-boy" >
            <div>
              <!-- 第一个 -->
              <div class="top-hadoop-boy-div" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="userGradeNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">机构数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
              <!-- 第二个 -->
              <div class="top-hadoop-boy-div-tow" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="userBindingNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">员工数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
              <!-- 第三个 -->
              <div class="top-hadoop-boy-div-three" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="homeTopContractNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">合同数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
              <!-- 第四个 -->
              <div class="top-hadoop-boy-div-four" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="informationNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">公库数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
              <!-- 第五个 -->
              <div class="top-hadoop-boy-div-sive" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="businessopportunityNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">商机数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
              <!-- 第六个 -->
              <div class="top-hadoop-boy-div-six" >
                  <div class="top-hadoop-boy-div-left">
                    <p class="top-hadoop-boy-div-left-top" id="companyNumber"></p>
                    <p class="top-hadoop-boy-div-left-buood">系统收录信息数量</p>
                  </div>
                  <div  class="top-hadoop-boy-div-reft">
                    <img src="./images/001.png"/>
                  </div>
              </div>
            </div>
            


            <!-- 今日统计 -->
            <div class="top-tongji">
                <div class="top-tongji-div-top">今日统计</div><br/>
                <div class="top-tongji-div-buoot">
                  <!-- 今日联系 -->
                  <div class="top-tongji-div-lef-table">
                    <table class="layui-table" lay-skin="line">
                        <colgroup>
                            <col width="300">
                            <col width="150">
                        </colgroup>
                        <thead>
                          <tr>
                            <th>今日联系公司</th>
                            <th>最近信息修改时间</th>
                          </tr> 
                        </thead>
                        <tbody id="mapContactTodayList">

                        </tbody>
                      </table>   
                  </div>
                  <!-- 近期到期合同 -->
                  <div class="top-tongji-div-count-table">
                      <table class="layui-table" lay-skin="line">
                          <colgroup>
                            <col width="300">
                            <col width="150">
                          </colgroup>
                          <thead>
                            <tr>
                              <th>合同公司</th>
                              <th>到日时间</th>
                            </tr> 
                          </thead>
                          <tbody id="mapContractDataobjectCountList">

                          </tbody>
                        </table> 
                    </div>
      
                  <!-- 最新收录信息 -->
                  <div  class="top-tongji-div-reage-table">
                      <table class="layui-table" lay-skin="line">
                          <colgroup>
                            <col width="300">
                            <col width="150">
                            <col width="150">
                          </colgroup>
                          <thead>
                            <tr>
                              <th>公司名字</th>
                              <th>法人</th>
                              <th>联系电话</th>
                            </tr> 
                          </thead>
                          <tbody id="ListCompanySearchList">

                          </tbody>
                        </table> 
      
                    </div>
                </div>
              </div>

            <!--周统计-->
            <div>
                <div class="top-tongji-div-top">一周统计</div><br/>
                <div class="top-tongji-tu">
                    <div class="layui-row layui-col-space10">
                        <div class="layui-col-md4">
                            <div class="layui-card zdy">
                                <div class="layui-card-header">卡片面板</div>
                                <div class="layui-card-body">
                                    <div id="basic" style="width: 100%;height: 300%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card zdytow">
                                <div class="layui-card-header">卡片面板</div>
                                <div class="layui-card-body">
                                    <div id="line" style="width: 100%;height: 300%;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md4">
                            <div class="layui-card zdythere">
                                <div class="layui-card-header">卡片面板</div>
                                <div class="layui-card-body">
                                    <div id="radar" style="width: 100%;height: 300%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>



    </div>
    
  </div>
  

</div>


<div th:include="common/js :: js"></div>

<script src="./js/index.js"></script>
<script src="./js/echarts.min.js"></script>
<script>
//JavaScript代码区域
layui.use('element', function(){
  var element = layui.element;
  
});
</script>



<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("basic"));
    // 指定图表的配置项和数据
    var option = {
        grid: {
            top: "20",
            left: "60",
            right: "30",
            bottom: "30"
        },
        color:["#FF9966","#FFCC99",'#99CCCC','#99CC99','#00CC99','#FFCCCC','#CCCCFF','#FF9999','#FFCCCC','#6378F0','#4FBC8E','#AE0EED','#54B7BD'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x: 'center',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>



<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("line"));
    // 指定图表的配置项和数据
    var option = {
        grid: {
            // top: "20",
            // left: "60",
            // right: "30",
            // bottom: "30",
            top: "4%",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },

        xAxis: {
            type: 'category',
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            name:'直接访问',
            type:'bar',
            barWidth: '60%',
            itemStyle: {
                normal: {
                    // 随机显示
                    //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                    // 定制显示（按顺序）
                    color: function(params) {
                        var colorList = ["#FF9966","#FFCC99",'#99CCCC','#99CC99','#00CC99','#FFCCCC','#CCCCFF','#FF9999','#FFCCCC','#6378F0','#4FBC8E','#AE0EED','#54B7BD'];
                        return colorList[params.dataIndex]
                    }
                },
            },
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>



<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("radar"));
    // 指定图表的配置项和数据
    var option = {
        grid: {
            top: "20%",
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color:["#FF9966","#FFCC99",'#99CCCC','#99CC99','#00CC99','#FFCCCC','#CCCCFF','#FF9999','#FFCCCC','#6378F0','#4FBC8E','#AE0EED','#54B7BD'],
        tooltip: {},
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>